2023/12/231438字符
尺寸相关概念
| CSS 像素 | 设备像素 |
|---|---|
| CSS 中使用的一个抽象的概念，单位 px | 屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位 pt （点） |
| 值是相对的，并不是绝对的 | 一般指手机的分辨率 |
1 px = 1 / 72 英寸（inch）
屏幕尺寸：
- 指的是屏幕对角线的长度
- 1 英寸（inch） = 2.54 厘米
- 屏幕尺寸 = 屏幕斜边像素 / PPI
const num = Math.sqrt(1920 ** 2 + 1080 ** 2); // 屏幕斜边像素
const PPI = 401;
console.log(num / PPI); //--> 5.493534089980794
像素密度（PPI） 每英寸物理像素的数量
- PPI 值越高，代表在一定尺寸上的屏幕上像素越多
- 同一尺寸下，PPI 提高一倍，像素会提高 4 倍
- PPI = 屏幕斜边像素 / 屏幕尺寸
const num = Math.sqrt(1920 ** 2 + 1080 ** 2); // 屏幕斜边像素
const INCH = 5.5; // 屏幕大小（英寸）
console.log(num / INCH); //--> 400.52857637859967
像素比
- 本质：一个 CSS 像素占用第几个设备像素
- 获取：window.devicePixelRatio （只读）
- DPR = 物理像素 / CSS 像素